<template>
  <div class="container">
    <DocHeader :title="data.title" fromDoc="restraintBand" />
    <div class="content bort">
      <!--  -->
      <div class="flex borb">
        <div class="flex-2 borl tac">使用目的</div>
        <div class="flex-9 borl borr pad10 sta">
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            限制不合作患者身体或肢体的活动，防止自伤或伤人
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            保护病人安全，防止躁动病人坠床
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            防止病人自行拔出各种重要管道(如气管插管、引流管、输液管等)，延误治疗甚至危及生命
          </div>
          <div class="flex">其他（注明）：</div>
        </div>
      </div>
      <!--  -->
      <div class="flex borb">
        <div class="flex-2 borl tac">可能发生的意外</div>
        <div class="flex-9 borl borr pad10 sta">
          <div class="flex mb5">
            作为一项护理技术操作，由于医学的特殊性和患者的个体差异性，在操作过程中或后期，有可能出现以下情况：
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            局部红肿
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            局部疼痛
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            皮肤瘀紫
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            皮肤勒伤
          </div>
          <div class="flex mb5">
            <el-checkbox value=""></el-checkbox>
            影响肢体血液循环，出现肿胀，甚至坏死。
          </div>
          <div class="flex">其他（注明）：</div>
        </div>
      </div>
      <!--  -->
      <div class="flex borb">
        <div class="flex-2 borl tac" style="flex-direction: column">
          <div>患者本人或亲属</div>
          <div>及其关系人意见</div>
        </div>
        <div class="flex-9 borl borr pad10 sta">
          <div class="flex mb5" style="line-height: 20px">
            我(我们)已经清楚了解该护理技术操作规程的必要性和可能发生的后果，本人自愿接受同意对
            {{
              patCur?.patientName
            }}进行该项护理技术操作。对于可能发生的上述情况，表示理解。
          </div>
          <div class="flex mb5 flex">
            <div class="flex-1">患者:</div>
            <div class="flex-1">联系方式:</div>
            <div class="flex-1">日期:</div>
            <div class="flex-1"></div>
          </div>
          <div class="flex mb5">
            <div class="flex-1">患者亲属:</div>
            <div class="flex-2">与患者关系:</div>
            <div class="flex-1"></div>
          </div>
          <div class="flex">
            <div class="flex-1">电话:</div>
            <div class="flex-2">日期:</div>
            <div class="flex-1"></div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="flex borb">
        <div class="flex-2 borl tac"></div>
        <div class="flex-9 borl borr pad10 sta">
          <div class="flex mb5">
            <div class="flex-1">护士签名:</div>
            <div class="flex-1">日期:</div>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="flex borb">
        <div class="flex-2 borl tac">备注</div>
        <div class="flex-9 borl borr pad10 sta">
          <div class="flex mb5" style="height: 50px"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    patCur: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({})

    function initData() {
      console.log(props.patCur)
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  margin: 0 5px !important;
}

.container {
  padding-top: getpx(50);
  margin: getpx(30) auto 0;
  width: calc(100% - 56px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  .content {
    margin-top: 20px;
  }
}

.flex {
  display: flex;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.mb5 {
  margin-bottom: 5px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}
</style>
